<template>
  <div class="order" style="background: #f0f0f0; padding-bottom: 300px">
    <!-- 导航 -->
    <header class="header">
      <span
        @click="
          () => {
            this.$router.go(-1);
          }
        "
        ><img src="img/return.png" alt=""
      /></span>
      <span>编辑收货地址</span>
      <!-- <hr style="width: 93%; margin: auto" /> -->
    </header>
    <!-- 用户 -->
    <div class="user">
      <!-- <form action="" method=""> -->
        <p class="shou">联系人</p>
        <p>
          <span>姓名</span
          ><span
            ><input
              type="text"
              placeholder="请填写收货人姓名"
              v-model="local.v_name"
          /></span>
        </p>
        <p>
          <span
            ><input type="radio" name="radio" />先生<input
              type="radio"
              name="radio"
            />女士</span
          >
        </p>
        <p>
          <span>手机</span
          ><span
            ><input
              type="text"
              placeholder="请填写收货手机号"
              v-model="local.v_phone"
          /></span>
        </p>
        <p class="shou">收货地址</p>
        <div class="address">
          <p>
            <span>省/市/区</span
            ><span
              ><input
                type="text"
                placeholder="点击选择"
                @click="choose"
                v-model="local.v_address"
            /></span>
          </p>
          <p>
            <span>楼号:门牌号</span
            ><span
              ><input
                type="text"
                placeholder="例: 10号楼427室"
                v-model="local.v_home"
            /></span>
          </p>
        </div>
        <div class="baocun">
          <input type="submit" value="保存" @click="cli()" />
        </div>
      <!-- </form> -->
    </div>

    <div class="divwrap" v-if="show">
      <v-distpicker
        type="mobile"
        @province="onChangeProvince1"
        @city="onChangeCity"
        @area="onChangeArea"
      ></v-distpicker>
    </div>
    <!--遮罩层-->
    <div class="blacks" v-if="show" @click="countermand"></div>

    <!-- 模态框 -->
    <div id="myModal">
      <div><img src="img/check2.png" alt="" width="50px" /></div>
      <div>添加成功！</div>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  outline: none;
}
// 模态框
#myModal {
  width: 240px;
  height: 100px;
  background-color: #cccccccc;
  position: fixed;
  top: 30%;
  left: 20%;
  /* border-right: 15px; */
  border-radius: 22px;
  font-size: 23px;
  justify-content: space-around;
  display: none;
  text-align: center;
  padding-top: 10px;
}
/*遮罩层*/
.blacks {
  position: fixed;
  width: 100%;
  height: 50%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.45);
}
/*省市区三级联动*/
.divwrap {
  height: 50%;
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 99;
}

/*外部*/
.divwrap .distpicker-address-wrapper {
  color: #0d0d0d;
  height: 100%;
}

/*头部*/
.divwrap .address-header {
  background: #000;
  color: #fff;
  width: 100%;
  position: fixed;
  bottom: 50%;
  height: 0.5rem;
  font-size: 0.2rem;
}

/*头部内容*/
.divwrap .address-header ul li {
  flex-grow: 1;
  text-align: center;
}

/*选择过省市区的头部*/
.divwrap .address-header .active {
  color: #fff;
  border-bottom: 0.05rem solid #666;
}

/*内容部分*/
.divwrap .address-container {
  overflow: scroll;
  height: 100%;
}

/*点过的地区内容*/
.divwrap .address-container .active {
  color: red;
}

// 顶部
.header {
  background-color: #fff;
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  span {
    font-size: 16px;
    line-height: 43px;
    margin-left: -26px;
    overflow: hidden;
    img {
      width: 25px;
      float: left;
      margin: 7px 0 0 10px;
    }
  }
}
.user {
  width: 100%;
  background-color: #f0f0f0;
  margin-top: 43px;
  font-size: 16px;
  // padding-left: 5px;
  input {
    font-size: 14px;
  }
  p {
    width: 100%;
    height: 40px;
    line-height: 40px;
    // margin: 2px 0;
    // padding: 3px 0;
    display: flex;
    background-color: #ffffff;
    border-bottom: 1px solid #eeeeee;
    flex-wrap: nowrap;
    span:nth-child(1) {
      flex: 2;
      text-align: center;
    }
    span:nth-child(2) {
      flex: 8;
      input {
        height: 25px;
        line-height: 25px;
        border: none;
      }
    }
  }
}
.user p:nth-child(3) {
  text-align: left;
  span {
    width: 60%;
    text-align: left;
    margin-left: 40px;
    input {
      margin-left: 30px;
    }
  }
}
.shou {
  background-color: #f0f0f0 !important;
  color: #8c8c8c !important;
}
.address {
  background-color: #fff;
  p {
    height: 40px;
    line-height: 40px;
    margin: 2px 0;
    display: flex;
    flex-wrap: nowrap;
    padding-left: 20px;

    span:nth-child(1) {
      flex: 4;
      text-align: left;
      // padding-left: -6px;
      // text-align: center;
    }
    span:nth-child(2) {
      flex: 6;
      input {
        height: 25px;
        line-height: 25px;
        border: none;
      }
    }
  }
}
.baocun {
  width: 90%;
  height: 40px;
  line-height: 40px;
  // margin-top: 30px;
  margin: 20px auto;
  background-color: #f0f0f0;
  input {
    width: 100%;
    background-color: #ffd161;
    margin: 0 auto;
    border: none;
    outline: none;
  }
}
</style>

<script>
import VDistpicker from "v-distpicker";

export default {
  components: { VDistpicker },
  name: "particular",
  data() {
    return {
      lxr: "",
      lxdh: "",
      show: false,
      //省市区
      province: "",
      city: "",
      area: "",
      user: "",
      local: {
        v_name: "",
        v_phone: "",
        v_address: "",
        v_home: "",
      },
    };
  },
  props: ["ips"],
  methods: {
    //取消选择地区
    countermand: function () {
      this.show = false;
    },
    //打开选择地区
    choose: function () {
      this.show = true;
    },
    onChangeProvince1: function (a) {
      this.province = a.value;
      if (a.value == "台湾省") {
        this.show = false;
      }
    },
    onChangeCity: function (a) {
      this.city = a.value;
    },
    onChangeArea: function (a) {
      this.area = a.value;
      this.show = false;
      this.address = this.province + this.city + this.area;
      this.local.v_address = this.address;
      console.log(this.address);
    },
    // 带参返回上一页
    cli() {
      // localStorage.setItem('address',JSON.stringify(this.local));
      this.$axios
        .post("http://47.114.130.21:3003/Address", {
          name: this.user,
          address: this.local,
        })
        .then((data) => {
          console.log(data);
        })
        .catch((error) => console.log(error));

      $("#myModal").fadeIn(500);
      setTimeout(() => {
        $("#myModal").fadeOut(500);
      }, 1000);
      this.$router.go(-1);
    },
  },
  mounted() {
    var person = JSON.parse(localStorage.getItem("personMsg"));
    this.user = person.name;
  },
};
</script>